<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时间显示组件</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f5f7fa;
      padding: 20px;
      transition: background 0.5s;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      text-align: center;
    }

    h1 {
      margin-bottom: 30px;
      color: #333;
    }

    .components-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin-bottom: 40px;
    }

    .controls {
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      max-width: 800px;
      margin: 0 auto;
    }

    .control-group {
      margin-bottom: 20px;
      text-align: left;
    }

    .control-group h3 {
      margin-bottom: 12px;
      color: #444;
    }

    .options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .option-btn {
      padding: 8px 16px;
      background: #f0f2f5;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .option-btn:hover {
      background: #e4e6eb;
    }

    .option-btn.active {
      background: #4a6cf7;
      color: white;
    }

    .color-picker {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .color-option {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.2s;
    }

    .color-option:hover {
      transform: scale(1.1);
    }

    .color-option.active {
      border-color: #333;
      transform: scale(1.1);
    }

    /* 时间组件样式 */
    .time-component {
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      width: 300px;
      position: relative;
      overflow: hidden;
    }

    .time {
      font-size: 3.5rem;
      font-weight: 300;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: baseline;
    }

    .date {
      font-size: 1.3rem;
      margin-bottom: 5px;
      opacity: 0.9;
    }

    .day {
      font-size: 1.1rem;
      opacity: 0.8;
    }

    .seconds {
      font-size: 1.8rem;
      margin-left: 5px;
      opacity: 0.8;
    }

    .ampm {
      font-size: 1.2rem;
      margin-left: 8px;
      opacity: 0.9;
    }

    /* 主题样式 */
    .theme-dark {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: white;
    }

    .theme-light {
      background: white;
      color: #333;
    }

    .theme-gradient {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
    }

    .theme-blue {
      background: linear-gradient(135deg, #4a6cf7, #2e4fd8);
      color: white;
    }

    .theme-green {
      background: linear-gradient(135deg, #38b2ac, #319795);
      color: white;
    }

    .theme-sunset {
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      color: white;
    }

    /* 装饰元素 */
    .decoration {
      position: absolute;
      border-radius: 50%;
      z-index: 0;
      opacity: 0.1;
    }

    .decoration-1 {
      width: 120px;
      height: 120px;
      background: white;
      top: -40px;
      right: -40px;
    }

    .decoration-2 {
      width: 80px;
      height: 80px;
      background: white;
      bottom: -30px;
      left: -30px;
    }

    .content {
      position: relative;
      z-index: 1;
    }

    /* 动画效果 */
    .pulse {
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.7; }
      100% { opacity: 1; }
    }

    .fade {
      animation: fade 1s ease-in-out;
    }

    @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .glow {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
<div class="container">
  <h1>时间显示组件</h1>

  <div class="components-container">
    <!-- 组件将通过JavaScript动态生成 -->
  </div>

  <div class="controls">
    <div class="control-group">
      <h3>主题</h3>
      <div class="options">
        <button class="option-btn active" data-theme="dark">深色</button>
        <button class="option-btn" data-theme="light">浅色</button>
        <button class="option-btn" data-theme="gradient">渐变</button>
        <button class="option-btn" data-theme="blue">蓝色</button>
        <button class="option-btn" data-theme="green">绿色</button>
        <button class="option-btn" data-theme="sunset">日落</button>
      </div>
    </div>

    <div class="control-group">
      <h3>显示选项</h3>
      <div class="options">
        <button class="option-btn active" data-option="seconds">显示秒</button>
        <button class="option-btn active" data-option="date">显示日期</button>
        <button class="option-btn active" data-option="day">显示星期</button>
        <button class="option-btn" data-option="ampm">12小时制</button>
        <button class="option-btn" data-option="glow">发光效果</button>
        <button class="option-btn" data-option="pulse">脉冲动画</button>
      </div>
    </div>

    <div class="control-group">
      <h3>字体大小</h3>
      <div class="options">
        <button class="option-btn" data-size="small">小</button>
        <button class="option-btn active" data-size="medium">中</button>
        <button class="option-btn" data-size="large">大</button>
      </div>
    </div>
  </div>
</div>

<script>
  // 时间组件类
  class TimeComponent {
    constructor(container, options = {}) {
      this.container = container;
      this.options = {
        theme: options.theme || 'dark',
        showSeconds: options.showSeconds !== false,
        showDate: options.showDate !== false,
        showDay: options.showDay !== false,
        use12Hour: options.use12Hour || false,
        fontSize: options.fontSize || 'medium',
        glowEffect: options.glowEffect || false,
        pulseAnimation: options.pulseAnimation || false,
        ...options
      };

      this.init();
      this.updateTime();
      setInterval(() => this.updateTime(), 1000);
    }

    init() {
      this.container.innerHTML = `
                    <div class="time-component theme-${this.options.theme}">
                        <div class="decoration decoration-1"></div>
                        <div class="decoration decoration-2"></div>
                        <div class="content">
                            <div class="time">
                                <span class="hours">00</span>:<span class="minutes">00</span>
                                ${this.options.showSeconds ? '<span class="seconds">:00</span>' : ''}
                                ${this.options.use12Hour ? '<span class="ampm">AM</span>' : ''}
                            </div>
                            ${this.options.showDate ? '<div class="date">2023年10月1日</div>' : ''}
                            ${this.options.showDay ? '<div class="day">星期日</div>' : ''}
                        </div>
                    </div>
                `;

      this.applyStyles();
    }

    applyStyles() {
      const component = this.container.querySelector('.time-component');
      const timeElement = component.querySelector('.time');

      // 设置字体大小
      const sizeMap = {
        small: '2.5rem',
        medium: '3.5rem',
        large: '4.5rem'
      };

      timeElement.style.fontSize = sizeMap[this.options.fontSize];

      // 应用发光效果
      if (this.options.glowEffect) {
        timeElement.classList.add('glow');
      } else {
        timeElement.classList.remove('glow');
      }

      // 应用脉冲动画
      if (this.options.pulseAnimation) {
        timeElement.classList.add('pulse');
      } else {
        timeElement.classList.remove('pulse');
      }
    }

    updateTime() {
      const now = new Date();

      // 获取时间组件
      let hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // 格式化小时
      if (this.options.use12Hour) {
        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12 || 12;
        this.container.querySelector('.ampm').textContent = ampm;
      }

      // 更新显示
      this.container.querySelector('.hours').textContent = hours.toString().padStart(2, '0');
      this.container.querySelector('.minutes').textContent = minutes.toString().padStart(2, '0');

      if (this.options.showSeconds) {
        this.container.querySelector('.seconds').textContent = ':' + seconds.toString().padStart(2, '0');
      }

      // 更新日期
      if (this.options.showDate) {
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        this.container.querySelector('.date').textContent = `${year}年${month}月${day}日`;
      }

      // 更新星期
      if (this.options.showDay) {
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekday = weekdays[now.getDay()];
        this.container.querySelector('.day').textContent = weekday;
      }
    }

    updateOptions(newOptions) {
      this.options = { ...this.options, ...newOptions };
      this.init();
      this.updateTime();
    }
  }

  // 初始化组件
  document.addEventListener('DOMContentLoaded', () => {
    const componentsContainer = document.querySelector('.components-container');

    // 创建两个示例组件
    const component1 = document.createElement('div');
    componentsContainer.appendChild(component1);

    const component2 = document.createElement('div');
    componentsContainer.appendChild(component2);

    // 初始化组件
    const timeComponent1 = new TimeComponent(component1, {
      theme: 'dark',
      showSeconds: true,
      showDate: true,
      showDay: true,
      use12Hour: false,
      fontSize: 'medium',
      glowEffect: true,
      pulseAnimation: false
    });

    const timeComponent2 = new TimeComponent(component2, {
      theme: 'gradient',
      showSeconds: true,
      showDate: true,
      showDay: true,
      use12Hour: true,
      fontSize: 'medium',
      glowEffect: false,
      pulseAnimation: true
    });

    // 控制按钮事件
    document.querySelectorAll('.option-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        btn.classList.toggle('active');

        // 获取所有激活的选项
        const activeThemes = Array.from(document.querySelectorAll('[data-theme].active'))
          .map(el => el.getAttribute('data-theme'));

        const activeOptions = Array.from(document.querySelectorAll('[data-option].active'))
          .map(el => el.getAttribute('data-option'));

        const activeSizes = Array.from(document.querySelectorAll('[data-size].active'))
          .map(el => el.getAttribute('data-size'));

        // 更新组件1
        timeComponent1.updateOptions({
          theme: activeThemes[0] || 'dark',
          showSeconds: activeOptions.includes('seconds'),
          showDate: activeOptions.includes('date'),
          showDay: activeOptions.includes('day'),
          use12Hour: activeOptions.includes('ampm'),
          fontSize: activeSizes[0] || 'medium',
          glowEffect: activeOptions.includes('glow'),
          pulseAnimation: activeOptions.includes('pulse')
        });

        // 更新组件2
        timeComponent2.updateOptions({
          theme: activeThemes[1] || activeThemes[0] || 'gradient',
          showSeconds: activeOptions.includes('seconds'),
          showDate: activeOptions.includes('date'),
          showDay: activeOptions.includes('day'),
          use12Hour: activeOptions.includes('ampm'),
          fontSize: activeSizes[0] || 'medium',
          glowEffect: activeOptions.includes('glow'),
          pulseAnimation: activeOptions.includes('pulse')
        });
      });
    });
  });
</script>
</body>
</html>
